<template>
    <div id="app">
        <el-container :style="[container]">
            <el-header v-if="!!userstore.token">
                <div class="header-content">
                    <div class="left-content">
                        <leftheader></leftheader>
                        <!-- 顶部左侧侧标签 -->
                    </div>
                    <div class="center-content">
                        <tabs></tabs
                        ><!-- 顶部中间标签 -->
                    </div>
                    <div class="right-content">
                        <div>
                            <el-dropdown>
                                <el-icon><More /></el-icon>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="closepage(1)">关闭当前页面</el-dropdown-item>
                                        <el-dropdown-item @click="closepage(2)">关闭所有页面</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <el-divider direction="vertical" />
                        </div>
                        <div>
                            <rightheader></rightheader>
                        </div>
                        <!-- 顶部右侧标签 -->
                    </div>
                </div>
            </el-header>
            <el-container style="height: 93.5vh">
                <el-aside v-if="!!userstore.token" width="200px" style="background: rgb(56 155 245)">
                    <sidemenu></sidemenu>
                </el-aside>
                <el-container style="width: calc(100% - 200px); display: flex">
                    <el-main style="padding: 0px; display: flex; flex-direction: column; overflow: hidden">
                        <!--路由挂载-->
                        <router-view v-slot="{ Component, route }">
                            <transition name="fade" mode="out-in">
                                <keep-alive :include="Stores.storagetab">
                                    <component :is="Component" :key="route.path" />
                                </keep-alive>
                            </transition>
                        </router-view>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { httpSend } from "@/utils/api";
import sidemenu from '../components/composite/sidemenu.vue'; //侧边menu按钮
import tabs from '../components/composite/tabs.vue'; //顶部中间标签
import rightheader from '../components/composite/rightheader.vue'; //顶部右侧标签
import leftheader from '../components/composite/leftheader.vue'; //顶部左侧侧标签
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { usetabsStore, useshareStore } from '@/store';
import { useRouter } from 'vue-router';
import { usegrantStore } from '@/store';

const grantStore = usegrantStore() as any;
const router = useRouter();
const tabStore = usetabsStore() as any;
const Stores = useshareStore() as any;
// 使用 vue-i18n 提供的 useI18n API
const { locale } = useI18n();
const switchLanguage = (language) => {
    localStorage.setItem('locale', language);
    locale.value = language;
};
// 引入 Pinia store
import { useusrStore } from '../store/users';
const userstore = useusrStore() as any;

// 动态样式
const container = computed(() => {
    if (!userstore.token) {
        return {
            background: 'linear-gradient(343deg, rgb(12 69 115), rgb(196 251 251))',
            height: '100vh',
        };
    } else {
        return {
            background: '#f1f1f1',
        };
    }
});

const closepage = (type: number) => {
    if (type == 1) {
        let tabToRemove = tabStore.tab.find((tab) => tab.name === tabStore.activetab);
        let index = tabStore.tab.findIndex((tab) => tab.name === tabStore.activetab);
        let next: any = [];
        if (index == 0) {
            if (tabStore.tab.length == 1) {
            } else {
                next = tabStore.tab[index + 1];
            }
        } else {
            next = tabStore.tab[index - 1];
        }
        tabStore.desctab(tabToRemove);
        if (next.path != undefined) {
            router.push(next.path);
        } else {
            router.push('/dashboard');
        }
    } else {
        console.log('关闭所有页面');
        tabStore.setnull();
        router.push('/dashboard');
    }
};

onMounted(() => {
    if (userstore.token) {
        loadgrant();
    }
});

//加载用户权限
const loadgrant = async () => {
    const res = await httpSend('loadgrant', {}, false);
    if (res.data) {
        grantStore.setisadmin(res.isadmin);
        grantStore.setgrantlist(res.data);
    }
};


</script>

<style scoped>
.el-header {
    --el-header-padding: 0px;
    /*--el-header-height: 80px;*/
    box-sizing: border-box;
    flex-shrink: 0;
    height: var(--el-header-height);
    padding: var(--el-header-padding);
    background: linear-gradient(92deg, #2e9cf7, #09e7e7);
    /* background: #e8e8e8;*/
    border: 0.1px solid #ccc;
}

.header-content {
    display: flex;
    justify-content: space-between; /* 三个部分均匀分布 */
    align-items: center; /* 垂直居中对齐 */
    width: 100%; /* 限制最大宽度 */
    /*overflow-x: auto;  允许横向滚动 */
    white-space: nowrap; /* 防止标签换行 */
    height: 40px;
}

.left-content {
    /* 左侧内容样式 */
    width: 200px;
    min-width: 200px;
    height: var(--el-header-height);
    /*  height: 70px;*/
}

.center-content {
    flex-grow: 1; /* 中间内容占据剩余空间 */
    /*  text-align: left;*/ /* 中间内容居中对齐 */
    /* margin-left: 1px;*/
    margin-top: 25px;
    padding: 0%;
    max-width: calc(100% - 700px);
}

.right-content {
    /* 右侧内容样式 */
    width: 500px;
    min-width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.container1 {
    background-color: #f1f1f1;
}
.container2 {
    width: 100%;
    background-image: url('/assets/home.jpg'); /* 使用静态图片的路径 */
    background-size: cover; /* 让背景图片覆盖整个容器 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 防止背景图片重复 */
    height: 100vh; /* 设置容器的高度为视口高度，或根据需要调整 */
}
/* 缩放过渡动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}
.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 400% 400%;

    /* 使用 @keyframes 定义动画 */
    animation: gradientAnimation 15s ease infinite;
}
/* 定义动画的关键帧 */
@keyframes gradientAnimation {
    0% {
        background: linear-gradient(0deg, red, yellow);
    }
    50% {
        background: linear-gradient(90deg, yellow, blue);
    }
    100% {
        background: linear-gradient(-90deg, blue, green);
    }
}
</style>
